<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS-商品列表</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <style>
        .content {
            min-height: 5900px;
            /* background: orange; */
        }
        
        .content-con {
            width: 92%;
            /* height: 1000px; */
            /* background: #ccc; */
            margin: 0 auto;
            padding-top: 15px;
            box-sizing: border-box;
        }
        
        .content-con .title {
            font-size: 18px;
            color: #434343;
            margin-bottom: 66px;
            cursor: pointer;
            width: 103px;
        }
        
        .content-con .title span:nth-of-type(1) {
            width: 20px;
            height: 14px;
            display: inline-block;
            background: url(img/spritecow.png) no-repeat -30px -5px;
            cursor: pointer;
        }
        
        .contentL {
            height: 100px;
            width: 22.6%;
            /* background: burlywood; */
            float: left;
            margin-right: 62px;
        }
        
        .contentL b {
            font-size: 24px;
            margin-bottom: 30px;
            display: block;
        }
        
        .contentL .color,
        .contentL .series {
            font-size: 20px;
        }
        
        .contentL .color .less,
        .contentL .series .less {
            width: 20px;
            display: inline-block;
            height: 20px;
            background: url(img/spritecow.png) no-repeat -48px 7px;
            margin-left: 205px;
        }
        
        .colorlist {
            width: 307px;
            height: 177px;
            /* background: orchid; */
            border-bottom: 1px solid #c5c5c5;
        }
        
        .colorlist li {
            width: 28px;
            height: 28px;
            float: left;
            border-radius: 50%;
            border: 1px solid #ccc8c8;
            margin-right: 21px;
            margin-bottom: 18px;
            cursor: pointer;
        }
        
        .series {
            margin-top: 17px;
        }
        
        .serieslist {
            width: 307px;
            height: 460px;
            /* background: paleturquoise; */
            border-bottom: 1px solid #c5c5c5;
        }
        
        .serieslist span {
            display: inline-block;
            width: 260px;
            line-height: 36px;
            margin-left: 11px;
            color: #313131;
        }
        
        .serieslist input {
            width: 15px;
            height: 15px;
            border: 1px solid #c9caca;
        }
        
        .contentR {
            width: 72%;
            /* background: palevioletred; */
            /* height: 1000px; */
            float: left;
        }
        
        .contentR .titleR {
            margin-top: 45px;
            margin-bottom: 24px;
            display: inline-block;
        }
        
        .dropdown {
            float: left;
            margin-top: 97px;
            margin-left: 35px;
        }
        
        .shoelist {
            /* height: 800px; */
            /* background: #c5c5c5; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .shoelist a {
            width: 24%;
            height: 350px;
            /* background: #ffc1c1; */
        }
        
        .womanshoe:hover {
            transform: scale(1.1);
            box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
        }
        
        .shoelist a img {
            width: 100%;
        }
        
        .shoelist .numbercolor {
            border-bottom: 1px solid #c5c5c5;
        }
        
        .shoelist .chinesename {
            display: block;
            color: #7a7a7a;
        }
        
        .seemore {
            width: 233px;
            height: 46px;
            border: 1px solid #c9c9c9;
            font-size: 20px;
            font-weight: bold;
            margin-top: 40px;
            text-align: center;
            line-height: 46px;
            margin-left: 37%;
        }
        
        .seemore:hover {
            background: #002b57;
            color: #fff;
            cursor: pointer;
        }
        
        .come {
            display: none;
        }
        
        .addicon {
            background: url(img/spritecow.png) no-repeat -246px -85px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg"" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>

    <!-- 商品详情 -->
    <div class="content ">
        <div class="content-con ">
            <div class="title "><span></span><span>&nbsp;女子</span>|<span>鞋类</span></div>
            <div class="contentL ">
                <b>购物 女子</b>
                <b class="color ">颜色 <span class="less "></span></b>
                <ol class="colorlist ">
                    <li style="background:#000000; "></li>
                    <li style="background:#0063ba; "></li>
                    <li style="background:#0e1e53; "></li>
                    <li style="background:#424515; "></li>
                    <li style="background:#544a27; "></li>
                    <li style="background:#8cc63f; "></li>
                    <li style="background:#949494; "></li>
                    <li style="background:#990202; "></li>
                    <li style="background:#a22d91; "></li>
                    <li style="background:#d52e84; "></li>
                    <li style="background:#eee2c6; "></li>
                    <li style="background:#fce662; "></li>
                    <li style="background:#ff6a6a; "></li>
                    <li style="background:#ff8300; "></li>
                    <li style="background:#ffc1c1; "></li>
                    <li style="background:#fffff0; "></li>
                    <li style="background:#ffffff; "></li>
                </ol>
                <b class="series ">系列 <span class="less "></span></b>
                <div class="serieslist ">
                    <label>
                    <input type="checkbox "><span>ENERGY LIGHTS</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>MARK NASON</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>YOU</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>ON THE GO</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>SANDALS</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>BOB'S</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>GO RUN</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>GO WALK</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>CASUAL</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>D'LITES</span><br>
                </label>
                    <label>
                    <input type="checkbox "><span>SPORT</span><br>
                </label>
                </div>
            </div>
            <div class="contentR ">
                <img src="img/1015.jpg " alt=" " width="100% " style="cursor: pointer; ">
                <b class="titleR ">鞋类(431件商品)</b>
                <div class="shoelist">
                    <a class="womanshoe" id="template" href="goodscontent.html">
                        <dt><img src="" alt=""></dt>
                        <dd class="numbercolor"></dd>
                        <b class="englishname"></b>
                        <span class="chinesename"></span><br>
                        <p class="price"></p>
                    </a>
                </div>
                <div class="seemore">查看更多+</div>
            </div>

        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom ">
        <div class="btop ">
            <div class="top-list ">
                <span><i>会员</i></span>
                <span><i>门店</i></span>
            </div>
        </div>
        <div class="middle ">
            <div class="copy ">
                <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="../img/wechatpay_pc.png " alt=" " >&nbsp;&nbsp;
                <img src="../img/alipay_pc.png " alt=" ">&nbsp;&nbsp;
                <img src="../img/unionpay_pc.png " alt=" ">&nbsp;&nbsp;
            </span>
            </div>
            <div class="china "><img src="../img/cn.png " alt=" ">&nbsp;&nbsp;中国</div>
        </div>
        <div class="lastmessage ">
            <div class="lastL ">
                <ul>
                    <b>联系客服</b>
                    <li>团购申请</li>
                    <li>在线客服</li>
                    <li>网站地图</li>
                </ul>
                <ul>
                    <b>我的账户</b>
                    <li>会员权利</li>
                    <li>我的信息</li>
                    <li>我的订单</li>
                    <li>我的积分</li>
                    <li>我的优惠券</li>
                    <li>收件地址</li>
                </ul>
                <ul>
                    <b>帮助中心</b>
                    <li>订单异常</li>
                    <li>发票</li>
                    <li>支付方式</li>
                    <li>退货说明</li>
                    <li>找回密码</li>
                    <li>注册与登录</li>
                </ul>
                <ul>
                    <b>关于斯凯奇</b>
                    <li>斯凯奇故事</li>
                    <li>联系我们</li>
                    <li>免责声明</li>
                    <li>隐私保护</li>
                    <li>服务协议</li>
                    <li>投资关系</li>
                    <li>招贤纳士</li>
                </ul>
            </div>
            <div class="lastR ">
                <b>关注我们</b>
                <p class="wechat "><img src="../img/weibo.png " alt=" "><img src="../img/wechat.png " alt=" ">
                    <img src="../img/QRCode.jpg " alt=" " class="code " id="template "></p>
                <i>获取斯凯奇最新资讯</i>
                <div class="email "> <input type="email "> <em></em></div>
            </div>
        </div>
    </div>
    <div class="footer ">
        <div class="footer-con ">
            <div class="footL ">
                <p>广州市利德丹贸易有限公司保留所有权利</p>
                <p><span style="color:#002b57 ">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
            </div>
            <div class="footR ">
                <img src="../img/pc_kx.png " alt=" ">
                <img src="../img/pc_cx.png " alt=" ">
                <img src="../img/pc_ga.png " alt=" ">
                <img src="../img/pc_zzN.png " alt=" ">
            </div>

        </div>
    </div>
    <script src="lib/jquery.min.js "></script>
    <script src="lib//common.js "></script>
    <script>
        $(".title").click(function() {
                location.href = `${address}/host.html`
            })
            //更新商品列表
        let http = new XMLHttpRequest();
        http.open("get", `${address}/getgoods`)
        http.send()
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText)
                let goodlist = $(".womanshoe")
                    // console.log(goodlist)
                data.forEach(item => {
                    // console.log(item)
                    let newitem = goodlist.clone()
                    newitem.attr("id", "").find(".numbercolor").html(`${item.numbercolor}色`)
                    newitem.find("img").attr("src", item.img)
                    newitem.find(".chinesename").html(item.chinesename)
                    newitem.find(".price").html(`￥${item.price}`)
                    newitem.find(".englishname").html(item.englishname)
                    newitem.appendTo($(".shoelist"))
                    newitem.attr("href", `goodscontent.html?id=${item.id}`)
                })
            }
        }
        let isclick = false;
        $(".less").click(function() {

            $(".colorlist").toggleClass("come")
            if (!isclick) {
                isclick = !isclick;
                $(".less").css({
                    background: "url(img/spritecow.png) no-repeat -26px -1px"
                });

            } else {
                isclick = !isclick;
                $(".less").css({
                    background: "url(img/spritecow.png) no-repeat -48px 7px"
                })
            }

        })
        $(".top-shop").click(function() {
            location.href = `${address}/cartlist.html`
        })
    </script>
</body>

</html>